<?php
    use User\Model\DailySignModel;
?>
<style>
    .table>thead>tr>th{text-align: center}
    .table>tbody>tr>td{vertical-align: middle;text-align: center}
    .table>tbody>tr>td>a{margin-top:5px}
    .btn-custom{color:white} .btn-custom:hover{color:white}
    .color1{background-color:#199ED8} .color2{background-color:#999933} .color3{background-color:#5CB85C}
    .color4{background-color:#F0AD4E} .color5{background-color:#D9534F} .color6{background-color:#FFCC33}
    .color7{background-color:#FF66CC} .color8{background-color:#66CCFF} .color9{background-color:#660000}
    .help-block a{color:blue;cursor: pointer}

    .image-list > ul,li{list-style: none}
    .image-list > li{display: inline-block}
    .li-image{width:50px;height:50px;margin-right:20px;margin-top:10px}
    .item{width:120px;height:120px;margin-left:30px;margin-top:20px;list-style: none;float:left;}
    .item a{position:absolute;font-size:14px;margin-left:120px;margin-top:-10px}
    .item img{width:120px;height:120px;}
</style>
<div class="page-heading">
    <h3><if condition="$type eq DailySignModel::ATTACH_TYPE_WORD">语录库
        <elseif condition="$type eq DailySignModel::ATTACH_TYPE_IMG"/>图库<else/>宜忌文库</if> - {$attach['title']}
    </h3>
</div>
<div class="row">
    <div class="col-lg-12">
        <div class="panel">
            <if condition="$type eq DailySignModel::ATTACH_TYPE_WORD">
                <div class="panel-heading">
                    <button style="margin-left:7px" onclick="addAttachment()" class="btn btn-custom color3">新增</button>
                    <form class="input-group" action="/User/DailySign/attachment" style="width:100px;float:right">
                        <input type="hidden" name="attach_id" value="{$attach_id}">
                        <input type="text" class="form-control" style="width:200px" name="content_or_author" placeholder="输入语录关键词或作者" value="{$content_or_author}">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="submit">
                                <i class="fa fa-search"></i>
                            </button>
                        </span>
                    </form>
                    <button style="margin-left:7px" onclick="$('#import').modal('show');" class="btn btn-custom color6">导入</button>
                    <button style="margin-left:7px" onclick="return download()" class="btn btn-custom color1">导出</button>
                </div>
                <div class="panel-body">
                    <div class="col-lg-12">
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                <tr>
                                    <th>编号</th>
                                    <th>语录</th>
                                    <th>作者</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <volist name="list" id="item">
                                    <tr>
                                        <td>{$item.id}</td>
                                        <td class="content-{$item['id']}">{$item.content}</td>
                                        <td class="author-{$item['id']}">{$item.author}</td>
                                        <td>
                                            <a type="button" href="javascript:;" onclick="editAttachment({$item['id']})" class="btn btn-custom color1">编辑</a>
                                            <a type="button" href="javascript:;" onclick="return statusAttachment({$item['id']});" class="btn btn-custom color5">删除</a>
                                        </td>
                                    </tr>
                                </volist>
                                </tbody>
                            </table>
                        </div>
                        <div class="pages">
                            {$page}
                        </div>
                    </div>
                </div>
            <elseif condition="$type eq DailySignModel::ATTACH_TYPE_IMG"/>
                <div class="panel-heading">
                    <button class="btn btn-custom color3 btn-multi" onclick="addAttachmentImage()">本地上传</button>
                </div>
                <div class="panel-body">
                    <div class="col-lg-12">
                        <ul>
                            <volist name="list" id="lt">
                                <li class="item">
                                    <a href="javascript:;" onclick="return statusAttachment({$lt['id']});" class="fa fa-times"></a>
                                    <img src="{$lt.content}">
                                </li>
                            </volist>
                        </ul>
                    </div>
                    <div class="pages">
                        {$page}
                    </div>
                </div>
            <else/>
                <div class="panel-heading">
                    <button style="margin-left:7px" onclick="addAttachmentAdvice()" class="btn btn-custom color3">新增</button>
                    <button style="margin-left:7px" onclick="$('#import').modal('show');" class="btn btn-custom color6">导入</button>
                    <button style="margin-left:7px" onclick="return download()" class="btn btn-custom color1">导出</button>
                </div>
                <div class="panel-body">
                    <div class="col-lg-12">
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                <tr>
                                    <th>编号</th>
                                    <th>语录</th>
                                    <th>类型</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <volist name="list" id="item">
                                    <tr>
                                        <td>{$item.id}</td>
                                        <td class="advice-content-{$item['id']}">{$item.content}</td>
                                        <td class="advice-type-{$item['id']}" data-type="{$item.type}">
                                            <if condition="$item.type eq DailySignModel::ATTACHMENT_TYPE_GOOD">
                                                宜
                                            <else/>忌</if>
                                        </td>
                                        <td>
                                            <a type="button" href="javascript:;" onclick="editAttachmentAdvice({$item['id']})" class="btn btn-custom color1">编辑</a>
                                            <a type="button" href="javascript:;" onclick="return statusAttachment({$item['id']});" class="btn btn-custom color5">删除</a>
                                        </td>
                                    </tr>
                                </volist>
                                </tbody>
                            </table>
                        </div>
                        <div class="pages">
                            {$page}
                        </div>
                    </div>
                </div>
            </if>
        </div>
    </div>
</div>
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="attachment" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                <h4 class="modal-title">语录</h4>
            </div>
            <div class="modal-body form-horizontal">
                <input type="hidden" name="attachment_id" value="-1">
                <div class="form-group">
                    <label class="col-sm-2 col-sm-2 control-label">语录</label>
                    <div class="col-lg-6">
                        <textarea class="form-control" style="width:400px;height:150px" title="语录" name="content"></textarea>
                        <span class="help-block">不得超过200个字，包括标点符号</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 col-sm-2 control-label">作者</label>
                    <div class="col-lg-6">
                        <input type="text" class="form-control" title="作者" name="author" value="">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" onclick="updateAttachment()">确定</button>
            </div>
        </div>
    </div>
</div>
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="attachment_image" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                <h4 class="modal-title">本地上传</h4>
            </div>
            <form role="form" class="form-horizontal" action="/User/DailySign/uploadImages" onsubmit="return checkImage()" method="post" enctype="multipart/form-data">
                <div class="modal-body form-horizontal">
                    <input type="hidden" name="attach_id" value="{$attach_id}">
                    <div class="form-group">
                        <label class="col-sm-2 col-sm-2 control-label">选择图片</label>
                        <div class="col-lg-6">
                            <input type="file" name="multimage" multiple="multiple" accept="image/jpeg,image/jpg,image/png,image/gif">
                            <span class="help-block">支持多选，支持jpg，gif，png格式</span>
                        </div>
                    </div>
                    <ul class="image-list"></ul>
                    <input type="hidden" name="images">
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-default">确定</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="attachment_advice" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                <h4 class="modal-title">宜忌</h4>
            </div>
            <div class="modal-body form-horizontal">
                <input type="hidden" name="attachment_id" value="-1">
                <div class="form-group">
                    <label class="col-sm-2 col-sm-2 control-label">内容</label>
                    <div class="col-lg-6">
                        <input type="text" class="form-control" title="内容" name="advice_content" value="">
                        <span class="help-block">建议内容四个字左右</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 col-sm-2 control-label">类型</label>
                    <div class="col-lg-4">
                        <label class="radio-inline">
                            <input type="radio" name="advice_type" checked="checked" value="<?php echo DailySignModel::ATTACHMENT_TYPE_GOOD; ?>"> 宜
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="advice_type" value="<?php echo DailySignModel::ATTACHMENT_TYPE_BAD; ?>">&nbsp;忌
                        </label>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" onclick="updateAttachmentAdvice()">确定</button>
            </div>
        </div>
    </div>
</div>
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="import" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                <h4 class="modal-title">导入</h4>
            </div>
            <form role="form" class="form-horizontal" action="/User/DailySign/uploadExcel" method="post" enctype="multipart/form-data">
                <div class="modal-body form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 col-sm-2 control-label">文件</label>
                        <div class="col-lg-6">
                            <input name="pic1" type="file" data-action="uploadFile1">
                            <input type="hidden" name="type" value="{$type}">
                            <input type="hidden" name="attach_id" value="{$attach_id}">
                            <span class="help-block">仅支持xls、xlsx、csv格式的文件，请按照规定格式导入，
                                <if condition="$type eq DailySignModel::ATTACH_TYPE_WORD">
                                    <a href="/Public/images/daily_sign/example1.xlsx">示例下载</a>
                                <elseif condition="$type eq DailySignModel::ATTACH_TYPE_IMG"/>
                                <else/>
                                    <a href="/Public/images/daily_sign/example3.xlsx">示例下载</a>
                                </if>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-default">确定</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript" src="/Public/js/common.upload.js"></script>
<script>
    common.upload.img.init();

    function addAttachment(){
        $('textarea[name=content]').val('');
        $('input[name=author]').val('');
        $('input[name=attachment_id]').val(-1)
        $('#attachment').modal('show');
    }

    function addAttachmentImage(){
        $('#attachment_image').modal('show');
    }

    function addAttachmentAdvice(){
        $('input[name=advice_content]').val('');
        $('input[name=advice_type]:eq(0)').prop('checked', 'checked');
        $('input[name=attachment_id]').val(-1)
        $('#attachment_advice').modal('show');
    }

    $('input[name=multimage]').change(function(){
        var files = this.files;
        if(files && files.length > 9){
            alert('一次只能上传9张图片');
            this.value = '';
            $(this).focus();
        }else{
            for(var i = 0; i < files.length; i++) {
                var reader = new FileReader();
                reader.readAsDataURL(files[i]);
                reader.onload = function (e) {
                    $.ajax({
                        data: {image: e.target.result},
                        dataType: 'json',
                        url: '/User/DailySign/uploadImage',
                        type: 'post',
                        success: function (res) {
                            $('.image-list').append('<li><img class="li-image" src="'+res.msg+'"></li>');
                        }
                    });
                }
            }
            this.value = "";
        }
    })

    function checkImage(){
        var data = [];
        $('.li-image').each(function(){
            var image = $(this).attr('src');
            data.push(image);
        });
        $('input[name=images]').val(data);
        return true;
    }

    function updateAttachment(){
        var attachment_id = $('input[name=attachment_id]').val();
        var attach_id = '{$attach_id}';
        var content = $('textarea[name=content]').val();
        var author = $('input[name=author]').val();
        var type = '{$type}';
        if(content === ''){
            alert('语录不能为空');
            return false;
        }
        $.ajax({
            url: "/User/DailySign/updateAttachment",
            type: "post",
            dataType: 'json',
            data: {content: content,author: author,type: type,attach_id: attach_id,attachment_id: attachment_id},
            success:function(result){
                if(result['code'] === 0){
                    alert('提交成功');
                    window.location.reload();
                }
            }
        });
    }

    function updateAttachmentAdvice(){
        var attachment_id = $('input[name=attachment_id]').val();
        var attach_id = '{$attach_id}';
        var advice_content = $('input[name=advice_content]').val();
        var advice_type = $('input[name=advice_type]:checked').val();
        var type = '{$type}';
        if(advice_content === ''){
            alert('内容不能为空');
            return false;
        }
        $.ajax({
            url: "/User/DailySign/updateAttachment",
            type: "post",
            dataType: 'json',
            data: {advice_content: advice_content,advice_type: advice_type,type: type,attach_id: attach_id,attachment_id: attachment_id},
            success:function(result){
                if(result['code'] === 0){
                    alert('提交成功');
                    window.location.reload();
                }
            }
        });
    }

    function editAttachment(id){
        var content = $('.content-'+id).text();
        var author = $('.author-'+id).text();
        $('#attachment').modal('show');
        $('textarea[name=content]').val(content);
        $('input[name=author]').val(author);
        $('input[name=attachment_id]').val(id);
    }

    function editAttachmentAdvice(id){
        var advice_content = $('.advice-content-'+id).text();
        var advice_type = $('.advice-type-'+id).data('type');
        $('#attachment_advice').modal('show');
        $('input[name=advice_content]').val(advice_content);
        var i = advice_type - 1;
        $('input[name=advice_type]:eq('+i+')').prop('checked', 'checked');
        $('input[name=attachment_id]').val(id);
    }

    function statusAttachment(id){
        if(!confirm('确认删除吗？')) return false;
        $.ajax({
            data: {id: id},
            dataType: 'json',
            url: '/User/DailySign/statusAttachment',
            type: 'get',
            success: function (res) {
                alert(res['info']);
                window.location.reload();
            }
        });
        return false;
    }

    function download(){
        var attach_id = '{$attach_id}';
        var type = '{$type}';
        window.location = '/User/DailySign/exportExcel?attach_id='+attach_id+'&type='+type;
        return false;
    }
</script>